<!DOCTYPE html>
<html lang="en">
<!--    课程：黑马程序员  《4个小时带你快速入门vue》
        地址：https://www.bilibili.com/video/BV12J411m7MG -->
<!-- P26 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>

    <div id="app">
        <button @click="getJoke">笑话</button>
        {{ message }}
        <p> {{jokeStr}}</p>


    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./js/vuev2.7.14.js"></script>
    <!-- 引入 axios.js  基于ajax的异步请求包 官网：https://github.com/axios/axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
                  接口:随机获取一条笑话
                  请求地址:https://autumnfish.cn/api/joke
                  请求方法:get
                  请求参数:无
                  响应内容:随机笑话
        */
        var app = new Vue({
            // 通过el属性将 vue实例挂载到div元素的内部
            el: '#app', //这里使用了 css的id选择器（符号#） 来命中dom元素。推荐使用id选择器
            data: {
                message: '随机获取一条笑话',
                jokeStr: "aaa"

            },
            methods: {
                getJoke: function () {
                    console.info(this.jokeStr)
                    var vThis = this //临时保存一下vue的this,为了在axios内部操作vue实例中的数据
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            //在这里，不能用this.xxx获取vue实例中的数据，因为这里的this已经不是vue实例的data了
                            //console.info(this.jokeStr)
                            console.info(response);
                            vThis.jokeStr = response.data;
                        },
                            function (err) {
                                console.info(err)
                            })
                }
            }
        })
    </script>
<!-- 总结
axios回调函数中的this已经改变,无法访问到data中数据
把this保存起来回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
-->

</body>


</html>